<template>
  <div class="container">
    <!-- <Modal v-model="isShows"> -->
    <Modal :value="isShows" @input="isShows = true">
      <h1>默认插槽</h1>
    </Modal>
    <button @click="isShows = !isShows">控制modal</button>
    <!-- 文章分类栏  插槽-->
    <van-tabs swipeable animated v-model="activeName">
      <!-- 频道列表数据渲染 -->
      <van-tab :key="item.id" v-for="item in channelList" :title="item.name">
        <ArticleList :channleId="item.id" />
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 三个杠-->
    <span class="bar_btn" @click="show = true">
      <van-icon name="wap-nav"></van-icon>
    </span>
    <ChannelEdit
      v-model="show"
      :channelList="channelList"
      :activeName="activeName"
      @enter-channel="activeName = $event"
    />
    <!-- sync同步修改数据 -->
    <!-- <ChannelEdit
      v-model="show"
      :channelList="channelList"
      :activeName.sync="activeName"
    /> -->
  </div>
</template>

<script>
// import request from '../../utils/request'
import { getUserChannelsApi } from '../../api/channel'
import ArticleList from './components/articleList.vue'
import ChannelEdit from './components/channel-edit.vue'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  // 测试是否缓存
  // activated () {
  //   console.log('进入缓存Home')
  // },
  data () {
    return {
      channelList: [],
      isShows: false,
      show: false, // 控制频道编辑弹层显示隐藏
      activeName: 0
    }
  },
  // 测试
  created () {
    // this.getList()
    // console.log(this.$router)
    this.getChannels()
  },
  // 测试
  methods: {
    //   getList () {
    //     request({
    //       url: 'user/profile'
    //     }).then(res => {
    //       // console.log(res)
    //     })
    //   }
    // }
    // 获取频道数据
    async getChannels () {
      const { data } = await getUserChannelsApi()
      // console.log(data.channels)
      this.channelList = data.channels
    }

  }
}
</script>

<style scoped lang='less'>
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  // 自定义tab样式
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #fc6627;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    // 控制列表区域可滚动
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  box-shadow: -6px -6px 8px #ddd;
}
</style>
